var clipboard;
var step;
var tutorial;
var so;

function showMessage(msgID,classID,msgString){
    window.document.getElementById(msgID).className=classID;
    window.document.getElementById(msgID).innerHTML=msgString;
}

function showNextStep(stepID){
    if (window.document.getElementById(stepID).style.display=="none"){
        window.document.getElementById(stepID).style.display="";
        step++;
    }
}

function checkInput(element,property,word){
    if(property=='textContent')
	    return (window.document.getElementById(element).textContent.trim() == word);
    if(property=='value')
        return (window.document.getElementById(element).value.toUpperCase() == word);
    return false;
}

function showNextTutorial(msgID,msgString){
    window.document.getElementById(msgID).innerHTML=msgString;
}

function selectText(){
    return window.getSelection();
}

function selectionIs(word){
    return selectText().toString().toUpperCase().trim()==word;
}

function workAreaIs(word){
    return window.document.getElementById("work-area").textContent.toUpperCase()==word;
}

function applyBold(){
	window.document.execCommand('bold',false,'');
	if(tutorial==3 && step==4){
		if(checkInput('work-area','textContent',""))
			showMessage("T3S4-complete","reintentelo","Debe ingresar texto !!!");
		else
			if(selectionIs(""))
				showMessage("T3S4-complete","reintentelo","Debe seleccionar parte del texto !!!");   
			else{
				showMessage("T3S4-complete","felicitacion","BIEN !!!");
				showNextStep('T3S5');
			}
	}
}

function applyUnderline(){
    window.document.execCommand('underline',false,'');
    if(tutorial==3 && step==5){
		if(checkInput('work-area','textContent',""))
			showMessage("T3S5-complete","reintentelo","Debe ingresar texto !!!");
		else
			if(selectionIs(""))
				showMessage("T3S5-complete","reintentelo","Debe seleccionar parte del texto !!!");   
			else{
				showMessage("T3S5-complete","felicitacion","BIEN !!!");
				showNextStep('T3S6');
			}
	}
}

function applyItalic(){
    window.document.execCommand('italic',false,'');
    if(tutorial==3 && step==6){
		if(checkInput('work-area','textContent',""))
			showMessage("T3S6-complete","reintentelo","Debe ingresar texto !!!");
		else
			if(selectionIs(""))
				showMessage("T3S6-complete","reintentelo","Debe seleccionar parte del texto !!!");   
			else{
				showMessage("T3S6-complete","felicitacion","BIEN !!!");
				mostrar("T3-complete");
			}
	}
}

function copy(){
    clipboard=selectText().toString();
	if(tutorial==2 && step==3){
		if(checkInput('work-area','textContent',""))
			showMessage("T2S3-complete","reintentelo","Debe ingresar texto !!!");
		else
			if(selectionIs(""))
				showMessage("T2S3-complete","reintentelo","Debe seleccionar parte del texto !!!");
			else{	
				showMessage("T2S3-complete","felicitacion","BIEN !!!");
				showNextStep('T2S4');
			}	
	}
}

function paste(){
	if(tutorial==2 && step==4){
        if(selectText().toString().length)
			$("#work-area").html($("#work-area").html().replace(selectText(),clipboard));
		else
			$("#work-area").html($("#work-area").html().replace("",clipboard));
	
		showMessage("T2S4-complete","felicitacion","BIEN !!!");
        showNextStep('T2S5');
    }
}

function cut(){
    clipboard=selectText().toString();
    if(tutorial==2 && step==5){
		if(checkInput('work-area','textContent',""))
			showMessage("T2S5-complete","reintentelo","Debe ingresar texto !!!");
		else	
			if(selectionIs(""))
				showMessage("T2S5-complete","reintentelo","Debe seleccionar parte del texto !!!");    
			else{
			$("#work-area").html($("#work-area").html().replace(selectText(),""));
			showMessage("T2S5-complete","felicitacion","BIEN !!!");
			mostrar("T2-complete");
			}
	}
}

function alignTo(align){
    window.document.getElementById("work-area").focus();
    window.document.execCommand(align,false,'');
}

$(window.document).ready(function() {
    /*INCIAR WORDPAD*/
    //noinspection JSJQueryEfficiency
    $('#start-button').click(function() {
        showMessage("T1S1-complete","felicitacion","BIEN !!!");
        showNextStep('T1S2');
    });

    $('#execute-button').click(function() {
        showMessage("T1S2-complete","felicitacion","BIEN !!!");
        showNextStep('T1S3');
    });

    $('#editor-button').click(function() {
        showMessage("T1S3-complete","felicitacion","BIEN !!!");
        mostrar('T1-complete');
    });

    //noinspection JSJQueryEfficiency
    $('#text-area').click(function() {
        showMessage("T1S2-complete","felicitacion","BIEN !!!");
        showNextStep('T1S3');
    });

    //noinspection JSJQueryEfficiency
    $('#text-areaXP').click(function() {
        showMessage("T1S3-complete","felicitacion","BIEN !!!");
        showNextStep('T1S4');
    });

    //noinspection JSJQueryEfficiency
    $('#text-areaXP').keypress(function(event) {
        if((event.keyCode || event.which)==13)
            if(checkInput('text-areaXP','value',"WORDPAD")){
                showMessage("T1S4-complete","felicitacion","BIEN !!!");
                window.document.getElementById('text-areaXP').disabled="disabled";
                mostrar('T1-complete');
            }
            else
                showMessage("T1S4-complete","reintentelo","Debe ingresar la palabra WORDPAD");
    });

    //noinspection JSJQueryEfficiency
    $('#text-area').keypress(function(event) {
        if((event.keyCode || event.which)==13)
            if(checkInput('text-area','value',"WORDPAD")){
                showMessage("T1S3-complete","felicitacion","BIEN !!!");
                window.document.getElementById('text-area').disabled="disabled";
                mostrar('T1-complete');
            }
            else
                showMessage("T1S3-complete","reintentelo","Debe ingresar la palabra WORDPAD");
    });

    /*COPIAR Y PEGAR*/
    //noinspection JSJQueryEfficiency
    $('#work-area').keypress(function(event) {
        if((event.keyCode || event.which)==13){
            if(step==2 && tutorial==2){
				if(checkInput('work-area','textContent',""))
                    showMessage("T2S2-complete","reintentelo","Debe ingresar algun texto !!!");
				else
                	{
                    showMessage("T2S2-complete","felicitacion","BIEN !!!");
                    showNextStep('T2S3');
					}
            }
        }
    });

    //noinspection JSJQueryEfficiency
    $('#work-area').click(function() {
        if(tutorial==2 && step==1){
            showMessage("T2S1-complete","felicitacion","BIEN !!!");
            showNextStep('T2S2');
        }
    });

    $('#undo-button').click(function() {
        if(tutorial==4 && step==3){
            showMessage("T4S3-complete","felicitacion","BIEN !!!");
            if(so!="xp")
                showNextStep('T4S4');
            else
            {
                mostrar("T4-complete");
            }
        }
    });

    $('#redo-button').click(function() {
        if(tutorial==4 && step==4){
            showMessage("T4S4-complete","felicitacion","BIEN !!!");
            mostrar("T4-complete");
        }
    });

    $('#justifyCenter-button').click(function() {
        if(tutorial==4 && step==1){
			showMessage("T4S1-complete","felicitacion","BIEN !!!");
			showNextStep('T4S2');
		}
    });

    $('#justifyRight-button').click(function() {
        if(tutorial==4 && step==2){
			showMessage("T4S2-complete","felicitacion","BIEN !!!");
			showNextStep('T4S3');
		}
	});

        $('#fs').change(function() {
		if(tutorial==3 && step==1){
			if(checkInput('work-area','textContent',""))
			{
				showMessage("T3S1-complete","reintentelo","Debe ingresar texto !!!");
				$('#fs').val("Calibri");
			}
			else
			{
				if(selectionIs(""))
				{
					showMessage("T3S1-complete","reintentelo","Debe seleccionar parte del texto !!!");    
					$('#fs').val("Calibri");
				}
				else
				{
					if($('#fs').val()=="BOINK LET")
					{
						showMessage("T3S1-complete","felicitacion","BIEN !!!");
						showNextStep('T3S2');
					}
					else
					{
						showMessage("T3S1-complete","reintentelo","Debe seleccionar BOINK LET");
					}
				}
			}
		}
	});

    $('#ts').change(function() {
        if(tutorial==3 && step==2){
			if(checkInput('work-area','textContent',""))
			{
				showMessage("T3S2-complete","reintentelo","Debe ingresar texto !!!");
				$('#ts').val("4");
			}
			else
				if(selectionIs(""))
				{
					showMessage("T3S2-complete","reintentelo","Debe seleccionar parte del texto !!!");   
					$('#ts').val("4");
				}
				else
					if($('#ts').val()=="6"){
						showMessage("T3S2-complete","felicitacion","BIEN !!!");
						showNextStep('T3S3');
					}
					else
						showMessage("T3S2-complete","reintentelo","Debe seleccionar 20");
		}
    });

    $('#cs').change(function() {
		if(tutorial==3 && step==3){
			if(checkInput('work-area','textContent',""))
			{
				showMessage("T3S3-complete","reintentelo","Debe ingresar texto !!!");
				$('#cs').val("#FF0000");
			}
			else
				if(selectionIs(""))
				{
					showMessage("T3S3-complete","reintentelo","Debe seleccionar parte del texto !!!");   
					$('#cs').val("#FF0000");
				}
				else
					if($('#cs').val()=='#FF0000'){
						showMessage("T3S3-complete","felicitacion","BIEN !!!");
						showNextStep('T3S4');
					}
					else
						showMessage("T3S3-complete","reintentelo","Debe seleccionar el color ROJO !!!");
        }
	});
});